@import './commonPC/_crumbs.less';
@import './commonPC/_imgText.less';
@import './commonPC/_search.less';
@import './commonPC/_infiniteScroll.less';

.brand-detail{
	.brand{
		margin:40px 0 52px 0;
		.logo{
			margin:0 0 20px 0;
			display: flex;
    		align-items: center;
			img{
				width:103px;
				height: 103px;
				margin:1px auto;
				display: inline-block;
			}
			.logo-show{
				display: inline-block;
				width: 140px;
				height: 105px;
				border-radius: 0px 15px 0px 15px;
				border: 1px solid #E4E4E4;
				margin:0 24px 0 0;
				overflow: hidden;
				text-align: center;
			}
			em{
				font-size: 24px;
				font-family: Roboto-Medium, Roboto;
				font-weight: 500;
				color: #121212;
				line-height: 30px;
				margin:0 38px 0 0;
			}
			i{
				width: 20px;
			    height: 22px;
			    display: inline-block;
			    cursor: pointer;
			    background: url(../images/home/heart@2x.png) no-repeat center center / 20px auto;
			    &.hov{
			    	background:url(../images/home/heart-fill@2x.png) no-repeat center center / 20px auto
			    }
			}
		}
		.date{
			margin:0 0 22px 0;
			font-size: 18px;
			display: flex;
    		align-items: center;
			img{
				width: 36px;
				height: 36px;
				margin:0 8px 0 0;
				border-radius: 10px;
			}
			em{
				color:#177FE9;
			}
		}
		p{
			font-size: 18px;
			line-height: 28px;
			margin:0 0 28px 0;
		}
	}
	.mobile{display:none;}
	.recommend{
		font-family: Roboto-MediumItalic;
	    font-size: 28px;
	    color: #121212;
	    letter-spacing: 0.5px;
	    line-height: 38px;
	    font-style: italic;
	    padding: 16px 0 40px 0;
	    border-top: 1px solid #121212;
	    text-transform: uppercase;
	}
	.products-content{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin:0 0 146px 0;
    }
    .favorite-box{
    	margin:0 0 80px 0;
    }
    .img-text{
    	padding:32px 0;
    	border-bottom: 1px solid #E4E4E4;
    	.img-text-right .descrption{
    		font-weight: 500;
    	}
    	&:first-child{
    		padding:0 0 32px 0;
    	}
    	&:last-child{
    		padding:32px 0 0 0;
    		border-bottom: none;
    	}
    }
    .search{
    	margin:0 0 30px 0;
    }
    .products-box{
	    width: 364px;
    	margin:0 0 40px 0;
	    box-sizing: border-box;
	    .products-box-img{
	        width: 364px;
	        height: 364px;
	        border: 1px solid #E4E4E4;
	        overflow: hidden;
	        box-sizing: border-box;
	        display: flex;
	        justify-content: center;
	        align-items: center;
	        img{
	            width: 364px;
	            min-height: 364px;
	           	height: auto;
	            display: block;
	        }
	    }
	}
	.products-box-tips{
	    h4{
	        display: flex;
	        justify-content: space-between;
	        a{ 
	            overflow: hidden;
	        }
	        span{
	            width: 20px;
	            height: 22px;
	            display: block;
	            margin: 16px 0 0 0;
	            cursor: pointer;
	            background: url(../images/home/heart@2x.png) no-repeat center center/20px auto;
	        }
	        span.hov{
	            background: url(../images/home/heart-fill@2x.png) no-repeat center center/20px auto;
	        }
	    }
	    .descrption{
	        font-family: Roboto-Medium;
	        font-size: 22px;
	        color:#121212;
	        line-height: 28px;
	        margin: 16px 0 12px;
	        font-weight: 500;
    		width: 298px;
	        -webkit-line-clamp:2;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    display: -webkit-box;
		    -webkit-box-orient: vertical;

	        &:hover{
	            text-decoration:underline;
	        }
	    }
	    .tips{
	        font-family: Roboto-Regular;
	        a{
	            color: #177FE9;
	            line-height: 20px;
	            margin-right: 16px;
	            font-size: 18px;
	            font-weight: 400;
	        }
	        a.price{
	        	width: 165px;
				font-family: Roboto-Medium, Roboto;
	            font-size: 22px;
	            font-weight: 500;
	            color: #FF4B68;
	            line-height: 22px;
    			margin:12px 0 0 0;
	            display: block;

	        }
	        p{
	            
	            a{
	                font-size: 18px;
		            color: #666666;
		            line-height: 20px;
		            word-break: break-all;
	            }
	            em{
	            	color:#177FE9;
					font-family: Roboto-Medium, Roboto;
	            }
	        }
	    }
	}
}

